<template>
    <div :style="{ width: '400px', margin: 'auto', marginTop: '10vh' }">
        <n-card
            :style="{ maxWidth: '400px' }"
            hoverable
            title="登录"
            :segmented="{
                content: true,
                footer: 'soft',
            }"
        >
            <template #header-extra v-if="ID_LOGIN">
                <n-button size="small" type="info" strong secondary :disabled="loading" @click="doIdLogin('2')">管理员</n-button>
            </template>
            <div :style="{ border: '1px dashed grey', width: '280px', height: '280px', margin: '0 auto', padding: '10px' }">
                <div id="qr" class="qr">
                    <canvas ref="qrRef" id="canvas" :style="{ width: '280px', height: '280px' }"></canvas>
                </div>
            </div>
            <template #action>
                <p :style="{ textAlign: 'center' }">
                    <n-text depth="3">{{ info }}</n-text>
                </p>
            </template>
        </n-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { Http } from '@/libs'
import QRCode from 'qrcode'

const store = useStore()
const router = useRouter()
const loading = ref(false)

const ID_LOGIN = ref(false)

const info = ref('请打开「微信」扫描登录')

const qrRef = ref<any>(null)

let tag = ''
let timer: any = undefined

const doIdLogin = (uid: string) => {
    loading.value = true
    let body = { uid: uid }
    Http.post('/dev/op/login', body).then(resp => {
        if (resp.stat.err > 0) {
            loading.value = false
            return
        }
        store.commit('user/signin', resp.data.user)
        router.replace('/')
    })
}
const execLoad = () => {
    loading.value = true
    info.value = '请打开「微信」扫描登录'
    Http.post('/ops/account/login/info', { type: 'Ops' }).then(resp => {
        loading.value = false
        if (resp.stat.err > 0) {
            return
        }
        tag = resp.data.tag

        let canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, resp.data.url, { width: 280, margin: 2 }, error => {
            if (error) console.error(error)
        })
    })
}

const doQuery = () => {
    if (!tag) return
    Http.post('/ops/account/login/state', { tag: tag }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.state == 'Scan') {
            info.value = '已扫码，请在「微信」确认登录'
        } else if (resp.data.state == 'Pass') {
            if (timer !== undefined) {
                clearInterval(timer)
            }
            store.commit('user/signin', resp.data.user)
            router.replace('/')
        } else if (resp.data.state == 'Expire') {
            if (timer !== undefined) {
                clearInterval(timer)
            }
            timer = setInterval(doQuery, 1000)
            execLoad()
        }
    })
}

onMounted(() => {
    ID_LOGIN.value = import.meta.env.VITE_MODE_TYPE == 'dev'
    execLoad()
    timer = setInterval(doQuery, 1000)
})

onBeforeUnmount(() => {
    if (timer !== undefined) {
        clearInterval(timer)
    }
})
</script>
